<template>
    <div style="width: 100%;height: 100%;position: relative;">
        <div id="map" style="width: 100%;height: 100%;"></div>
        <!--左上角-->
        <div style="position: absolute;top: 0;left: 0;">
            <el-button-group>
                <!--http://ua.bigemap.com:30081/bmsdk/bigemap.dc-satellite/tiles/14/13561/2420.jpg-->
                <el-button size="mini" round @click="addLayer('bigemap.zhongkexingtu')">卫星</el-button>

                <!--http://ua.bigemap.com:30081/bmsdk/bigemap.vector-street/tiles/14/13561/2420.jpg-->
                <el-button size="mini" round @click="addLayer('bigemap.amap-map')">电子</el-button>
            </el-button-group>
        </div>
    </div>
</template>
<script>
    import maps from '@/util/bigMap'

    export default {
        data() {
            return {
                //bigemap地图
                map: null,
                BM: null,
                currentLayer:null,
            }
        },
        mounted() {
            this.initMap();
        },
        beforeDestroy() {
            if (this.map) {
                this.map.remove();
            }
        },
        methods: {
            //初始化地图
            initMap() {
                let that = this;
                maps.then(() => {
                    that.BM = window.BM;
                    //这里之后会换成加载瓦片图的地址
                    that.BM.Config.HTTP_URL = "http://www.bigemap.com:9000";
                    that.map = that.BM.map('map',null, {
                        center: [36.79538, 118.03406],
                        zoom: 4,
                        zoomControl: false, //关闭缩放控件
                        crs: that.BM.CRS.EPSG4326, //坐标参考系统:EPSG4326
                    }).addEventListener('zoomend', function (e) {
                        that.zoomLevel = e.target._zoom;
                        console.log('当前级别 : ' + that.zoomLevel);
                    });
                })
            },
            // 新增：添加图层的方法
            addLayer(layerType) {
                let that = this;
                // 移除当前所有底图图层（避免叠加）
                if (that.currentLayer) {
                    that.currentLayer.remove(that.map);
                }
                that.currentLayer = that.BM.tileLayer(layerType);
                that.currentLayer.addTo(that.map);
            },
        }
    }

</script>